<html>
<script type="text/javascript">

 jQuery('#nosotros').ready(function($) {

  /*****************************/
  /*     Efecto de entrada     */
  /*****************************/   
    $('#nosotros').
    css({'position':'relative',
    'left':'+50em'        
    }).animate({"left": "-=50em"}, "fast");

   
   
/******************/
/*  Nosotros Nav  */
/******************/

$('#nosotros nav a').click(function (event) {
        event.preventDefault();
    });

    $('#nosotros nav a').hover(function () {
        var ruta = $(this).attr('href');
        var ruta2 = "#nosotros article:nth-of-type(";
        ruta2 = ruta2 + ruta + ")";
        $('#nosotros article').hide();
        mifuncion(ruta);
        $(ruta2).slideDown();
    }, function () {/**/});


    function mifuncion(num) {

        if (num == "2") {
            $('#capa').css('background-image', 'url(<?php echo URL::base()?>media/images/mision.jpg)');
        }
        else if (num == "3") {

            $('#capa').css('background-image', 'url(<?php echo URL::base()?>media/images/vision.jpg)');
        }
        else if (num == "4") {
            $('#capa').css('background-image', 'url(<?php echo URL::base()?>media/images/galery.jpg)');
        }
        else if (num == "5") {
            $('#capa').css('background-image', 'url(<?php echo URL::base()?>media/images/info.jpg)');
        }
        else {
            $('#capa').css('background-image', 'url(<?php echo URL::base()?>media/images/nosotros.jpg)');
        }
    }

/********************/
/*    Modal         */
/********************/
$('#capa section article:nth-of-type(4) img').click(function(){
  var dir=$(this).attr('src');
  $('#absoluto .clonar img').attr('src',dir);
  $('#modalGalery').css('display','block');
});    
    
$('.btnclose').click(function(){
  $('#modalGalery').fadeOut('fast');
        });

/*event.stopPropagation();*/
$('#absoluto').click(function (event) {
     if (event.target == this) {
       $('#modalGalery').fadeOut('fast');
        }
});  
 /*-----*/ 


}); 
</script>
  
      <div id="nosotros">
        <div id="CenterGrid">      
          <div id="izBarContain">
            <div id="izBar1">
                <nav>
                  <a href="1">Nosotros</a>
                  <a href="2">Mision</a>
                  <a href="3">Vision</a>
                  <a href="4">Galeria</a>              
                  <a href="5">Informacion</a>
                </nav>
            </div>               
          </div>
        
          <div id="capa" >
            <div id="iz"></div>        
            <section>
                <article>
                  <header><h2>NOSOTROS</h2></header>
                  <p>
                    Somos una empresa joven y dinámica en el rubro del Software dedicados a la creacion de aplicaciones de calidad y generadores de contenido en la Web de alto nivel. Desarrollamos diversos tipos de aplicaciones: Softwarre a Medida, Desarrollo de Portales Web, Desarrollo para moviles y afines.
                    
                  </p>
                  
                  <p>Contamos con desarrolladores de alto nivel  y con amplia experiencia. Trabajamos para ofrecer soluciones integrales a la medida de los clientes. Poniendo a su disposición nuestra  capacidad creadora en brindar productos y servicios acordes con los requerimientos más exigentes en tecnologías de la información.</p>                    
                  <div class="video"> 
                  <iframe style="height:200px;width:300px;" src="http://www.youtube.com/embed/gCuPx9shWT0?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>  
                  </div>

                </article>            
               <article>
                  <header><h2>Mision</h2></header>
                  <p> Ofrecer soluciones tecnológicas innovadoras, adaptables a las necesidades de nuestros clientes, apoyando al crecimiento productivo de estos, entregando herramientas, conocimiento y tecnología informática que satisfaga sus necesidades.
                  </p>                                   
                  <p>Promocionar la industria del software dentro del Mercado Peruano    para poder consolidar este rubro en el pais.</p>
                  <img src="<?php echo URL::base()?>media/images/mision.png" />               
                </article>
                
                <article>
                  <header><h2>Vision</h2></header>
                  <p>Consolidarnos como una de las pricipales empresas del pais brindando soluciones inteligentes a pequeñas, medianas y grandes empresas, incursionando en el mercado provincial y nacional. </p>                
                  <p>Convertirnos en los socios estratégicos preferidos en tecnologías de la información de nuestros clientes.</p>
                  <div class="visionImg">
                      <img src="<?php echo URL::base()?>media/images/visionMan.jpg" />       
                  </div>

                </article>
          
                <article>
                  <header><h2>Galeria</h2></header>                  
                    
                    <img src="<?php echo URL::base()?>media/images/keira.jpg" alt="">
                    <img src="<?php echo URL::base()?>media/images/logokodevian2.png" alt="">
                    <img src="<?php echo URL::base()?>media/images/logokodevian2.png" alt="">
                    <img src="<?php echo URL::base()?>media/images/logokodevian2.png" alt="">
                    <img src="<?php echo URL::base()?>media/images/logokodevian2.png" alt="">

                    <img src="<?php echo URL::base()?>media/images/logokodevian2.png" alt="">
                    <img src="<?php echo URL::base()?>media/images/logokodevian2.png" alt="">
                    <img src="<?php echo URL::base()?>media/images/logokodevian2.png" alt="">
                    <img src="<?php echo URL::base()?>media/images/logokodevian2.png" alt="">
                    <img src="<?php echo URL::base()?>media/images/logokodevian2.png" alt="">

                </article>
                
                <article>
                  <header><h2>Informacion</h2></header>
                                     
                   
                  <div class="infoNosotros">
                    <h3>Contactanos</h3>  
                    <img src="<?php echo URL::base()?>media/images/email.png"class="manInfo" alt="">
                    <br/>
                    <p><span>Contactate con nosotros desde Aqui:</span>
                      <img src="<?php echo URL::base()?>media/images/click.png" alt="">
                    </p>
                  </div>
                  <div class="infoNosotros">
                    <h3>Siguenos en:</h3>
                    <div>                      
                      <img src="<?php echo URL::base()?>media/images/logo_facebook.jpg" alt="">
                      <img src="<?php echo URL::base()?>media/images/googleplus_logo.jpg" alt="">
                      <img src="<?php echo URL::base()?>media/images/youtube_logo.png" alt="">
                      <img src="<?php echo URL::base()?>media/images/twitter_logo.jpg" alt="">
                    </div>
                  </div>
                </article>       
            </section>
            <div id="der"></div>          
          </div>  
        </div>
        
        <aside>
            <div id="borderAside">
            <iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FJoeDayz%2F162969128159%23%21%2Fpages%2FJoeDayz%2F162969128159&amp;width=294&amp;colorscheme=light&amp;connections=15&amp;stream=true&amp;header=true&amp;height=587" style="overflow:hidden;">
            </iframe>
            </div>          
        </aside>
      </div>
      
      <div id="modalGalery">
                <div id="opaco"></div>
                <div id="absoluto">
                  <div id="grupo">
                  <div  class="btnclose">
                    <a href="#" ><img src="<?php echo URL::base()?>media/images/sprite.png" alt=""></a>
                  </div>  
                  <div class="clonar">
                    <img src="">                    
                  </div>
                  </div>
                </div>
      </div>
    
</html>